<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <script src="../wh2114/vuedemo/lib/vue-router.js"></script>
    <link rel="stylesheet" href="../wh2114/vuedemo/lib/animate.css" />
    <style>
      .box {
        width: 170px;
        min-height: 170px;
        background: darkcyan;
        padding: 30px;
      }
      table {
        border: 1px solid #000;
      }
      td {
        border: 1px solid #000;
        padding: 10px;
        text-align: center;
      }
      ul {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
      }
      li {
        width: 200px;
        background: pink;
      }

      .zoom-enter-active {
        animation: zoomInDown 0.9s;
      }

      .zoom-leave-active {
        animation: zoomOutDown 0.9s;
      }

      .box {
        width: 50%;
        min-height: 300px;
        border: 1px solid #999;
        border-radius: 10px;
      }
      .router-link-exact-active,
      .router-link-active {
        font-size: 30px;
        font-weight: bold;
        color: #f50;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <myhead></myhead>

      <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
      <router-view class="box"></router-view>
      <!-- 6 路由跳转 声明式 -->
      <hr />
      <div>
        <router-link to="/home">首页1</router-link>
        <router-link to="/dashboard">首页3</router-link>
        <router-link :to="{name:'home'}">首页2</router-link>

        <router-link to="/news/2022/infos/乌克兰">新闻-乌克兰</router-link>
        <router-link to="/news/0221/infos/奥运会">新闻-奥运会</router-link>
        <router-link :to="{name:'news',params:{nid:1001,title:'新春快乐'}}"
          >新闻-虎年初一</router-link
        >

        <router-link to="/user?uid=2114&name=zuozuomu">用户-大左</router-link>
        <router-link to="/user?uid=2113&name=leson">用户-大雷</router-link>
        <router-link :to="{name:'user',query:{uid:2112,name:'老王'}}"
          >用户-老王</router-link
        >

        <router-link to="/find/东湖/0320?who=小余#level2">find-1</router-link>
        <router-link to="/find/黄鹤楼/0501?who=小左#level3">find-2</router-link>
        <router-link
          :to="{name:'find',params:{address:'上海',time:'0414'},query:{who:'2114所有人'}}"
          >find-3</router-link
        >
        <router-link to="/mine/1314">个人中心</router-link>
        <router-link :to="{name:'mine',params:{mid:520}}">我的0</router-link>
        <router-link to="/mine/admin">超管</router-link>
      </div>
    </div>
    <template id="home">
      <div>
        <h2>Home - hOme - Home</h2>
      </div>
    </template>
    <template id="news">
      <div>
        <h2>News - news - News</h2>
        <h2>: 路由参数 (params )</h2>
        <h2>nid --- {{$route.params.nid }}</h2>
        <h2>title --- {{$route.params.title }}</h2>
      </div>
    </template>
    <template id="user">
      <div>
        <h2>User - User - 用户中心</h2>
        <h2>路由信息 $route</h2>
        <h2>? 声明参数 (query)</h2>
        <h2>uid --- {{$route.query.uid }}</h2>
        <h2>name --- {{$route.query.name }}</h2>
      </div>
    </template>
    <template id="mine">
      <div>
        <h2>mine - mine - 个人中心</h2>
        <h2>mid --- {{$route.params.mid }}</h2>
      </div>
    </template>

    <template id="notfound">
      <div>
        <h2>404 - 404 - notfound</h2>
      </div>
    </template>

    <template id="find">
      <div>
        <h1>Find - Find - FInd - 发现春天的美丽</h1>
        <h2>$route (路由信息)</h2>
        <div>
          <p>$route.params (路由参数)</p>
          <h3>address== {{$route.params.address}}</h3>
          <h3>time== {{$route.params.time}}</h3>
          <p>$route.query (查询参数)</p>
          <h3>who --- {{$route.query.who }}</h3>
          <h2>路由路径path : {{$route.path}}</h2>
          <h2>路由的完整路径fullPath: {{$route.fullPath}}</h2>
          <h2>路由名称 name: {{$route.name }}</h2>
          <h2>路由hash 值 : {{$route.hash }}</h2>
          <h2>
            路由标记的信息 meta :
            {{$route.meta.isAlive?'需要缓存':'不需要缓存'}}
          </h2>
        </div>
      </div>
    </template>

    <script>
      Vue.component("myhead", {
        template: "<h2>Head - wh2114-daydayup</h2>",
      });
      // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

      // 1. 定义路由组件.
      const Home = {
        template: "#home",
      };
      const News = {
        template: "#news",
      };
      const Find = {
        template: "#find",
      };
      const User = {
        template: "#user",
      };
      const Mine = {
        template: "#mine",
      };
      const NotFound = {
        template: "#notfound",
      };
      // 2. 定义一些路由
      // 每个路由都需要映射到一个组件。
      const routes = [
        {
          path: "/",
          redirect: {
            // path:"/home"
            name: "home",
          },
        },
        {
          path: "/home",
          alias: "/dashboard",
          component: Home,
          name: "home",
          meta: { isAlive: true },
        },
        { path: "/news/:nid/infos/:title?", component: News, name: "news" },
        { path: "/user", component: User, name: "user" },
        {
          path: "/find/:address/:time",
          component: Find,
          name: "find",
          meta: { isAlive: true, isAnimate: true },
        },

        {
          path: "/mine/admin",
          component: {
            template: "<h2>admin - admin - 超管 </h2>",
          },
        },
        { path: "/mine/:mid", component: Mine, name: "mine" },
        { path: "/404", component: NotFound, name: "notfound" },
        {
          path: "*",
          redirect: {
            name: "notfound",
          },
        },
      ];

      // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
      // # 表示 hash 路由
      const router = new VueRouter({
        routes,
        mode: "hash", // mode 路由模式  hash/history
      });

      // 4. 路由挂载到根实例
      const vm = new Vue({
        router, // this.$router
        data: {
          title: "Vue 路由初步",
        },
        components: {},
        watch: {
          $route: function (to, from) {
            console.log(to);
            console.log(from);
          },
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;

          console.log(this.$router); // 路由对象  负责路由跳转 路由导航和路由全局监听
          console.log(this.$route); // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)
        },
      }).$mount("#app");
    </script>
    <!-- 
        Vue 路由是用来实现单页面应用的 
        routes 会根据不同的path 去映射不同的 组件  , 然后渲染组件到 router-view 

        动态路由  ==  路由参数传递   (动态路径参数)

        动态路由匹配  2中  ?id=1903  :(冒号)  
        a. ?id=1903  问号拼接的参数  表示查询参数  (search ?id=1903  ) (query id=1903)
        b. : 冒号声明    params    路由参数  
        /users/:uid    /users/1001  /users/1002   $route.params.uid 
        /users/:uname?   /users/ming  /users/55k   $route.params.uname  
        ? 表示这个是一个未知的参数  三目    传     
        
        $route  路由对象属性 
        $route.query      个 key/value 对象，表示 URL 查询参数 (?)
        $route.params     一个 key/value 对象  获取路由参数   (:)   
        $route.name       当前路由的名称 
        $route.path       对应当前路由的路径，总是解析为绝对路径  
        $route.hash       当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
        $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径
        $route.meta       路由标记信息  

        name 命名路由
        通过一个名称来标识一个路由  
        :to="{name:'users',params:{uid:1002}}"

        匹配优先级  
        同一个路径可以匹配多个路由     匹配的优先级就按照路由的定义顺序：
        谁先定义的，谁的优先级就最高    

        路由重定向   url 一定改变  
        www.baidu.com  ==>   www.zuozhaoxi.xom 
        { path:"*", redirect:{name:"404"}}

        路由别名  第二个名称   缺点 没有高亮  
        path =  '/admin'   
        alias = '/administrator'  


        router-link 的 高亮 path  
     -->
  </body>
</html>
